<template>
	<view class="CAPTCHA_box" v-if="openFlag">
		<view class="captcha">
			<view class="captcha_header">
				<view class="captcha_title">
					请完成安全验证
				</view>
				<uni-icons type="close" size="24" color="gray" @click="closeAlert"></uni-icons>
			</view>
			<!-- 图片内 -->
			<view class="captcha_images" :style="captchContentStyle">
				<!-- {{captchContentStyle}} -->
				<!-- 内部样式 -->
				<view class="captcha_checkImg" :style="hkView"></view>
			</view>
			<!-- {{hkView}} -->
			<!-- 滑动框 -->
			<view class="captcha_btn">
				<view :style="hdView"></view>
				<view class="captcha_slider" :style="hdbj">
					<!--  @touchend="mouseUpFn" @touchmove="mouseMoveFn" -->
					<uni-icons type="right" @touchstart="mouseDownFn" @touchmove="mouseMoveFn" @touchend="mouseUpFn"
						size="24" color="#fff" :style="buttonStyle"></uni-icons>
				</view>
			</view>
		</view>


	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		defineProps,
		defineEmits
	} from 'vue';
	import configList from "./config.json"
	// console.log(configList)
	// 弹框状态 回调
	const props = defineProps({
		showCode: {
			type: Boolean,
			default: false
		}
	})
	const emits = defineEmits(['completeCaptcha'])
	watch(() => props.showCode, (newData) => {
		console.log(newData,51)
		if (newData == true) {
			openAlert()
		} else if (newData == false) {

		}
	},{immediate:true})
	// 弹框是否开启
	const openFlag = ref(false)
	// 验证结果的状态
	const yanFlag = ref(false)
	// 按钮的样式
	const buttonStyle = ref({})
	// 滑块盒子样式
	const hkView = ref({})
	// 拼图位置
	const hdbj = ref({
		width: '0rpx',
		backgroundColor: 'pink'
	})
	// 拼图左侧
	const hdView = ref({
		width: '0rpx',
		height: '100%',
		backgroundColor: '#aaffff'
	})
	let sjIndex = 0
	// 初始图片库
	const scList = [{
		bj: '',
		xz: '',
		fw: 0
	}]
	// 主要内容的背景图
	const captchContentStyle = ref({
		backgroundImage: ''
	})
	// 验证码背景
	let bj = ''
	let xz = ''
	let fw = 0

	// 是否运行滑动 默认不允许
	const disableFlag = ref(false)

	// 找到按钮的dom元素
	const buttonDom = ref()
	// 开启弹框的方法
	const openAlert = () => {
		// 设置状态是true 开启弹框
		openFlag.value = true
		// 设置滑块默认位置
		hkView.value = {}
		// 设置滑块默认位置
		hdbj.value = {}
		hdView.value = {
			height: '100%',
			// 
			backgroundColor: 'rgba(174, 250, 254, 0.6)'
		}
		// 允许进行滑动操作
		disableFlag.value = false
		// 拼图默认位置
		sjIndex = Math.floor(Math.random() * configList.length)

		bj = configList[sjIndex].bj
		xz = configList[sjIndex].xz
		fw = configList[sjIndex].fw
		// console.log(bj, xz, fw)
		// 背景弹框
		captchContentStyle.value.backgroundImage = `url(${bj})`
		captchContentStyle.value.backgroundSize = `cover`
		// // 内部弹框
		hkView.value.backgroundImage = `url(${xz})`
		hkView.value.backgroundSize = `cover`
		hkView.value.top = configList[sjIndex].top + 'rpx'



		// pinView.value = '0rpx'
	}
	// 关闭弹框方法
	const closeAlert = () => {
		
		emits('completeCaptcha', yanFlag.value)
		
		openFlag.value = false
		

	}
	// 鼠标按下的位置
	let downX = 0
	// 鼠标按下的方法
	const mouseDownFn = (event) => {
		// console.log(event, event.changedTouches)
		if (!disableFlag.value) {
			downX = event.changedTouches[0].clientX
		}
	}
	// 滑动事件
	const mouseMoveFn = (event) => {
		if (!disableFlag.value) {
			// 当前需要移动的位置 是当前位置-默认位置
			let moveX = event.changedTouches[0].clientX - downX
			// 如果滑动的位置>0 <240 在可滑动范围内
			if (moveX > 0 && moveX <= 198) {
				// 设置拼图的定位
				hkView.value.left = moveX * 2 + 'rpx'
				hdbj.value.left = moveX * 2 + 'rpx'
				hdView.value.width = moveX * 2 + 'rpx'
			} else if (moveX <= 0) {
				// 超出滑动范围，需要将值固定
				hkView.value.left = '0rpx'
				hdbj.value.left = '0rpx'
				hdView.value.width = '0rpx'
			} else {
				// 超出滑动范围，需要将值固定
				hkView.value.left = '400rpx'
				hdbj.value.left = '400rpx'
				hdView.value.width = '400rpx'
			}
			// console.log(moveX)
		}
	}
	// 结束滑动事件
	const mouseUpFn = (event) => {
		if (!disableFlag.value) {
			// 获取当前滑动距离
			let down = event.changedTouches[0].clientX - downX
			// 设置提示文字
			let resTex = ''
			// 判断滑动距离是都在成功验证的范围内
			if (down >= (fw - 20) && down <= (fw + 20)) {
				resTex = '成功'
				yanFlag.value = true
			} else {
				resTex = '失败'
				yanFlag.value = false
			}

			disableFlag.value = true

			uni.showToast({
				title: resTex,
				success() {
					// emits('completeCaptcha', yanFlag.value)
					setTimeout(() => {
						// console.log(yanFlag.value)
						closeAlert()
					}, 1000)
				}
			})

		}
	}
</script>

<style lang="less" scoped>
	.CAPTCHA_box {
		width: 100%;
		height: 100%;
		position: fixed;
		background: rgba(0, 0, 0, .5);
		display: flex;
		justify-content: center;
		align-items: center;
		top:0;

		.captcha {
			// width: 600rpx;
			width: 620rpx;
			// height: 600rpx;
			padding: 30rpx 60rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 10rpx;

			.captcha_header {
				display: flex;
				padding-bottom: 30rpx;

				.captcha_title {
					flex: 1;
					text-align: center;
					font-weight: 600;
					padding-left: 24px;
					font-size: 34rpx;
					// 文字颜色
					background: linear-gradient(to right, #aaaaff, #aaffff);

					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					background-clip: text;
					text-fill-color: transparent;
				}
			}


			.captcha_images {
				width: 100%;
				height: 410rpx;
				border-radius: 10rpx;
				// border: 1rpx solid lightgray;
				// background: url('/static/background.jpg');
				background-size: 120%;
				background-repeat: no-repeat;
				position: relative;
				overflow: hidden;

				.captcha_checkImg {
					width: 100rpx;
					height: 100rpx;
					border: 1rpx solid #fff;
					position: absolute;
					left: 0;
					// top: 20%;
					border-radius: 6rpx;
				}

			}

			.captcha_btn {
				height: 80rpx;
				border-radius: 10rpx;
				border: 1rpx solid lightgray;
				background: url('/static/cap.jpg');
				background-size: 80%;
				background-repeat: no-repeat;
				background-position-x: center;
				position: relative;
				overflow: hidden;
				margin-top: 30rpx;
				box-sizing: border-box;
				display: flex;

				.captcha_slider {
					width: 100rpx;
					height: 78rpx;
					line-height: 78rpx;
					background: linear-gradient(-50deg, #aaaaff, #aaffff);
					border-radius: 10rpx;
					text-align: center;
					position: absolute;
					top: 0;
				}
			}
		}
	}
</style>